/**
 * Created by lee_mxue on 17/5/8.
 */
import React from "react";
import ReactDOM from "react-dom";
import { addErrorListener } from "../../lib/handleError"
import weixinShare from "../../lib/weixinShare"
import AJAX from "../../lib/ajax"
import Tools from "../../lib/tools"
require('../../lib/rem');
require('./CabinetSendingSuccess.less');
require('../../styles/common.less');
require('../../styles/resetWeui.less');
require('../../styles/lux.less');
require('../../pages/MyPackageDeliveryDetail/MyPackageDeliveryDetail.less');

const DialogAdress = require('../../pages/MyPackage/components/DialogAdress');
const DeliveryCard = require('../../pages/MyPackage/components/DeliveryCard')

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url_params: Tools.getParams(),
            isReady: false,     //是否可以加载页面
            order_info: undefined,
            addressInfo: {
                recipent_name: "",
                recipent_address: "",
                recipent_phone: "",
                delivery_name: "",
                delivery_address: "",
                delivery_phone: "",
            },    //地址信息
            wx_type: window.localStorage.getItem('wx_type'),
        };
    }

    componentWillMount() {
        addErrorListener()()
        //隐藏分享功能
        weixinShare.hideAll();

        this.fetch()
    }

    componentDidMount() {
        AJAX.appendBaiduAnalysis()
    }

    fetch() {
        const { url_params } = this.state
        AJAX.request("sending_order_detail", {
            order_id: url_params.order_id,
            type: 3
        }, (data) => {
            const { sender_addr, consignee_addr } = data.body
            const order_info = {
                order_id: data.body.id,
                order_num: data.body.order_num,
                sender_city: sender_addr.area_name,
                consignee_city: consignee_addr.area_name,
                cabinet_code: data.body.cabinet_code,
            }
            const addressInfo = {
                recipent_name: consignee_addr.realname,
                recipent_address: consignee_addr.address,
                recipent_phone: consignee_addr.phone,
                delivery_name: sender_addr.realname,
                delivery_address: sender_addr.address,
                delivery_phone: sender_addr.phone,
            }
            this.setState({
                order_info,
                addressInfo,
                isReady: true
            })
        })
    }

    makeContent() {
        const { order_info, addressInfo, wx_type } = this.state
        return (
            <div className="main">
                <DialogAdress dataSource={addressInfo} />
                <div className="top_active ">
                    <div className="delivery-card">
                        <div className="delivery-card__title">
                            <div className={`delivery-card__title_icon flag-blue`}>
                                已下单
                                <span className="icon"></span>
                            </div>
                            <div className="delivery-card__title_order">
                                <div className="label label-colon">订单编号</div>
                                <div className="span">{order_info.order_num}</div>
                            </div>
                        </div>
                        <div className="delivery-card__content">
                            <div className="delivery-card__content_order">
                                <div className="delivery-card__content_order_from">
                                    <div className="city">
                                        {order_info.sender_city}
                                    </div>
                                </div>
                                <div className="delivery-card__content_order_status">
                                    <div className="icon-right">
                                        >>
                                    </div>
                                </div>
                                <div className="delivery-card__content_order_from">
                                    <div className="city">
                                        {order_info.consignee_city}
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div className="flex_column flex1 center_content">
                    <div className="content_top flex1">
                        <p className="fontSize16px">
                            下单成功，请尽快到您选择的近邻宝智能柜进行包裹投递。
                        </p>
                    </div>
                    <div className="content_center  fontSize12px">
                        <div className="">
                            <p>温馨提示：</p>
                            <p>1、如果您在快递柜附近，点击【立即投递】可即刻进行快递的投递。</p>
                            <p>2、如果您希望稍后投递，请点击【知道了】，待到智能柜后，可在【个人中心-我的寄件】中查看订单信息，并完成投递操作。</p>
                        </div>
                    </div>
                    <div className="content_bottom ">
                        <a href={`./CabinetSendingDeliver?order_id=${order_info.order_id}&cabinet_code=${order_info.cabinet_code}`}
                            className="weui-btn  yellow fontSize16px">立即投递</a>
                        <a href={`./PickUp?wx_type=${wx_type}`} className="weui-btn  yellow  fontSize16px">知道了</a>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        const { isReady } = this.state
        let content = null
        if (isReady) {
            content = this.makeContent()
        }
        return content
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
if (module.hot) {
    module.hot.accept();
}